echarts的词云图表类型有哪些 | 您所在的位置:网站首页 › echarts 词云边界调整 › echarts的词云图表类型有哪些 |
前段时间在开发过程中用 echarts 开发了一些图表,当做到词云的时候发觉 echarts-wordcloud 插件的颜色配置项不生效。在网上查了不少资料,好多人说 echarts4 和 echarts-wordcloud 插件不兼容了,然后还提供了一些优雅降级方案,让 echarts3 和 echarts4 同时在项目里运行。但是后来我研究发现其实 echarts4 是可以完美兼容 echarts-wordcloud 的 ,只是部分网友提供的配置方法有问题而已。 在 html 中创建一个渲染图表的 div ,引入插件和数据: 我的数据格式是: const originData = [ { name: '基因编辑', value: 1228 }, { name: '婴儿', value: 981 }, { name: '贺建奎', value: 363 }, …… ] 初始数据不用非要这种格式,只要最终格式化成这样就可以。 声明一个可以创建随机颜色的函数,用来给词云加颜色: function randomColor() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } 格式化数据: const data = originData.map(val => ({ ...val, textStyle: { normal: { color: randomColor() } } })); 我在每个数据后面添加了 textStyle 属性,并给了一个随机的颜色,这也是本文最重要的地方。好多人说词云改不了颜色是因为颜色配置错了位置。 配置 options : chart.setOption({ series: [{ type: 'wordCloud', shape: 'diamond', left: 'center', top: 'center', right: null, bottom: null, width: '70%', height: '80%', sizeRange: [12, 60], rotationRange: [-90, 90], rotationStep: 45, gridSize: 8, drawOutOfBound: false, textStyle: { normal: { fontFamily: 'sans-serif', fontWeight: 'normal' }, emphasis: { shadowBlur: 10, shadowColor: '#333' } }, data }] }); 这样echarts就可以渲染出一个词云图表了: 我会一一解析这些配置的作用: shape :词云的形状,默认是 circle,可选的参数有cardioid 、 diamond 、 triangle-forward 、 triangle 、 star。 left top right bottom :词云的位置,默认是 center center。 width height :词云的宽高,默认是 75% 80%。 sizeRange :词云的文字字号范围,默认是[12, 60] ,词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例, value 最小的渲染为 12px ,最大的渲染为 60px ,中间的值按比例计算相应的数值。 rotationRange rotationStep :词云中文字的角度,词云中的文字会随机的在 rotationRange 范围内旋转角度,渲染的梯度就是 rotationStep ,这个值越小,词云里出现的角度种类就越多。以上面参数为例,可能旋转的角度就是 -90 -45 0 45 90 。 gridSize :词云中每个词的间距。 drawOutOfBound :是否允许词云在边界外渲染,直接使用默认参数 false 就可以,否则容易造成词重叠。 textStyle :词云中文字的样式, normal 是初始的样式, emphasis 是鼠标移到文字上的样式。 以上基本为 echarts-wordcloud 所有的配置项,完整示例可以去 我的github 上下载。 |
CopyRight 2018-2019 实验室设备网 版权所有 |